<template>
  <view>
    <!-- 分享出去的标题带home -->
    <uni-nav-bar v-if="isSharePage" class="statusBar" fixed="true" status-bar="true" :title="title" :border="border" :background-color="backgroundColor" :color="color">
      <view slot="left" class="header-left flex flex-center" :style="{borderColor: color === '#000000' ? '#ddd' : color}" @click="goHome">
        <view :style="{color: color}" class="ic ic-home" />
      </view>
    </uni-nav-bar>

    <!-- 不需要icon -->
    <uni-nav-bar v-else-if="noIcon" class="statusBar" fixed="true" status-bar="true" :title="title" :border="border" :background-color="backgroundColor" :color="color"></uni-nav-bar>

    <!-- 不需要icon -->
    <uni-nav-bar v-else-if="slotPattern" class="statusBar" fixed="true" status-bar="true" :title="title" :border="border" :background-color="backgroundColor" :color="color">
      <view slot="left"></view>
    </uni-nav-bar>

    <!-- 需要icon -->
    <uni-nav-bar v-else-if="leftText" class="statusBar"
                 fixed="true" status-bar="true"
                 :leftText="title"
                 left-icon="back"
                 @clickLeft="goBackPage"
                 :border="border"
                 :background-color="backgroundColor" :color="color">
    </uni-nav-bar>
    <uni-nav-bar v-else class="statusBar"
                 fixed="true" status-bar="true"
                 :title="title"
                 left-icon="back"
                 @clickLeft="goBackPage"
                 :border="border"
                 :background-color="backgroundColor" :color="color">
    </uni-nav-bar>

  </view>
</template>

<script>
import { uniNavBar } from '@dcloudio/uni-ui'
import { mapState } from 'vuex'
export default {
  name: 'XrNavBar',
  components: {
    uniNavBar
  },
  props: {
    leftText: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '小书宝'
    },
    // 返回回调事件
    callback: {
      type: Boolean,
      default: false
    },
    // 没有icon
    noIcon: {
      type: Boolean,
      default: false
    },
    // 插槽模式
    slotPattern: {
      type: String,
      default: ''
    },
    // 返回首页
    backIndex: {
      type: Boolean,
      default: false
    },
    // 是否需要border隔离
    border: {
      type: [Boolean, String],
      default: true
    },
    color: {
      type: String,
      default: '#000000'
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    ...mapState(['isSharePage'])
  },
  methods: {
    goHome () {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    goBackPage () {
      if (this.callback) {
        // 有的页面返回需要处理一些数据
        this.$emit('goBack')
      } else if (this.backIndex) {
        this.goHome()
      } else {
        const pages = getCurrentPages()
        if (pages && pages.length > 1) {
          uni.navigateBack({})
        } else {
          this.goHome()
        }
      }
    }
  }
}
</script>
<style lang="scss">
.statusBar{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.nav-wrap{
  width: 100%;
}

/deep/ .uni-navbar {
  background: red;
}

/deep/ .uni-navbar--border{
  width: 100% !important;
  background: red;
}

.mynav{
  background: red;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  /deep/ .uni-navbar{
    background: blue;
    display: none!important;
  }
}
/deep/ .uni-navbar{
  background: blue;
  display: none!important;
}
</style>
